<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home</title>
<link href="/css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Custom Theme files -->
<link href="/css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/login.js"></script>
<script src="/js/jquery.easydropdown.js"></script>
<script src="/js/jquery-1.11.1.min.js"></script>
<!--Animation-->
<script src="/js/wow.min.js"></script>
<link href="/css/animate.css" rel='stylesheet' type='text/css' />
<script>
//	new WOW().init();
</script>
</head>
<body>

<div class="header">
		   <div class="col-sm-8 header-left">
					 <div class="logo">
						<a href="/"><img src="/images/logos.png" alt=""/></a>
					 </div>
					 <div class="menu">
						  <a class="toggleMenu" href="#"><img src="/images/nav.png" alt="" /></a>
                          <ul class="nav" id="nav">
                            <li class="active"><a href="#">个人中心</a></li>

                              <li><a th:if="${session.user==null}" href="#">我的订单</a></li>
                            <li><a th:if="${session.user}" th:href=" '/order/list?userId=' + ${session.user.userId}">我的订单</a></li>
                            <div class="clearfix"></div>
                        </ul>
							<script type="text/javascript" src="js/responsive-nav.js"></script>
				    </div>	
				     <!-- start search-->
						<!----search-scripts---->
						<script src="/js/classie.js"></script>
						<script src="/js/uisearch.js"></script>
						<script>
//
						</script>
						<!----//search-scripts---->						
	    		    <div class="clearfix"></div>
	    	    </div>
	            <div class="col-sm-4 header_right">
	    		      <div id="loginContainer"><a href="#" id="loginButton"><img src="/images/login.png">
						  <span th:if="${session.user==null}">登陆</span>
                          <a href="/info"><span th:if="${session.user}" th:text="${session.user.displayName}"></span></a>
                          <input type="button" id="logout" value="注销" onclick="userlogout()"  th:if="${session.user}">
                      </a>
						    <div id="loginBox">                
						        <form id="loginForm" action="/user/login" method="post">
						                <fieldset id="body">
						                	<fieldset>
						                          <label>用户名</label>
						                          <input type="text" name="username" id="username">
						                    </fieldset>
						                    <fieldset>
						                            <label>密码</label>
						                            <input type="password" name="password" id="password">
						                     </fieldset>
                                            <fieldset th:if="${loginFailure}">
                                                <label style="color: red">用户名或密码错误</label>
                                            </fieldset>
						                    <input type="submit" id="login" value="登陆">
						                	<!--<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>-->
						            	</fieldset>
						                 <span style="display: inline"><a th:href="@{/register.html}">注册新账户</a></span>
                                         <span style="display: inline"><a th:href="@{/findpsw.html}">忘记密码</a></span>
							      </form>
				              </div>
			             </div>
		                 <div class="clearfix"></div>
	                 </div>
	                <div class="clearfix"></div>
   </div>
    <script th:inline="javascript">
        if ([[${loginFailure}]] == true) {
           $('#loginBox').toggle()
        }
    </script>
   <div class="banner">
    <div class="container_wrap">
      <h1>What are you looking for?</h1> 
       <form id="searchForm" method="get" action="/">
           <input type="text" placeholder="酒店名/描述/地点..." name="hotelName" th:value="${name}">
           <div class="contact_btn">
              <label class="btn1 btn-2 btn-2g"><input type="submit" id="submit" value="   搜索   "></label>
           </div>
       </form>
          <div class="clearfix"></div>
    </div>
</div>
<div class="content_top">
    <div class="container">
        <div class="content_dropdown">   
            <span class="fliter">星级：</span> 
            <select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}' name="hotelLevel" form="searchForm">
                <option value="0">无</option>
                <option value="1" th:selected="${level}==1">一星级</option>
                <option value="2" th:selected="${level}==2">二星级</option>
                <option value="3" th:selected="${level}==3">三星级</option>
                <option value="4" th:selected="${level}==4">四星级</option>
                <option value="5" th:selected="${level}==5">五星级</option>
            </select>
        </div>
<!--
        <div class="content_dropdown">
            <span class="fliter">所需日期：</span>
            <input type="text" id="user-checkTimeRange" placeholder="请选择日期">
        </div>-->
        <div class="content_dropdown">
            <span class="fliter">距离：</span>
                <select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}' name="distance" form="searchForm" id="distance">
                    <option value="">不显示距离</option>
                    <option value="1000" th:selected="${distance} == '1000'">1公里以内</option>
                    <option value="3000" th:selected="${distance} == '3000'">3公里以内</option>
                    <option value="10000" th:selected="${distance} == '10000'">10公里以内</option>
                    <option value="20000" th:selected="${distance} == '20000'">20公里以内</option>
                    <option value="100000" th:selected="${distance} == '100000'">100公里以内</option>
                </select>
            <input type="hidden" name="location" id="location" form="searchForm" value="1">
        </div>
        <div class="content_dropdown">
            <span class="fliter">入住日期/退房日期:</span>
            <input type="text" id="user-checkTimeRange" placeholder="请选择日期" style="color: #F19E1F" form="searchForm" name="checktime" th:value="${checktime}">
        </div>
        <script type="text/javascript">
                if (navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(showPosition);
                }else{
                    $('#location').val('')
                    alert("浏览器不支持地理定位。");
                }
                function    showPosition(position)
                {
                    latitude  = position.coords.latitude;
                    longitude = position.coords.longitude;
                    console.log("Latitude: " + position.coords.latitude +
                        " Longitude: " + position.coords.longitude)
                    $('#location').val(longitude + '=' + latitude)
                }
        </script>
  </div>
</div>
   <div class="content_middle">
   	  <div class="container">
   	    <div class="content_middle_box">
          <div class="top_grid">
   			<div class="col-md-3 index-grids" th:each="hotel : ${hotels}" style="height: 340px;">
   			  <div class="grid1">
   				<div class="view view-first">
                  <div class="index_img">
                      <a th:href=" '/hotel/query_HotelandRoom_by_id?hotelId='+${hotel.hotelId}" >
                          <img th:src="${hotel.hotelPic}" class="img-responsive" style="height: 200px;"  alt=""/>
                      </a>
                  </div>
   				    <div class="sale"></div>
   			          <div class="mask" th:id="'mask'+${hotelStat.index}" th:onmouseover="'toggleMap('+${hotelStat.index}+')'" style="cursor: auto">
                          <a th:href=" '/hotel/query_HotelandRoom_by_id?hotelId='+${hotel.hotelId}" ><div class="info"><i class="search"> </i> 更多</div></a>
                        <ul class="mask_img">
                        	<div class="clearfix"> </div>
                        </ul>
                       </div>
                   </div>
   				 <div class="inner_wrap">
   				 	<p th:text="${hotel.hotelDesc}" class="hotel-desc" th:title="${hotel.hotelDesc}"></p>
                     </br>
   				 	<ul class="star1">
   				 	  <h4 class="green" th:text="${hotel.hotelName}"></h4>
   				 	  <li>
                          <a href="#">
                              <img src="/images/star_1.png" alt="" th:if="${hotel.hotelLevel} == 1">
                              <img src="/images/star_2.png" alt="" th:if="${hotel.hotelLevel} == 2">
                              <img src="/images/star_3.png" alt="" th:if="${hotel.hotelLevel} == 3">
                              <img src="/images/star_4.png" alt="" th:if="${hotel.hotelLevel} == 4">
                              <img src="/images/star_5.png" alt="" th:if="${hotel.hotelLevel} == 5">
                          </a>
                      </li>
   				 	</ul>
   				 </div>
   			   </div>
   			</div>
   			<div class="clearfix"> </div>
   		</div>
   	  </div>
   </div>
       <script>
           var distances = [[${distances}]];
           for (i = 0;i < $('.sale').length;i++) {
               if (isNaN(distances[i]) == false)
                    $('.sale')[i].innerText = '距离' + distances[i] + '公里';
           }
       </script>
       <div class="pager clear">
           <ul class="page-con">
               <li class="prev">
                <a th:href="'/?pageIndex=' + (${pageIndex}- 1)+'&hotelName='+${name}+'&hotelLevel='+${level}+'&distance='+${distance}+'&location='+${location}+'&checktime='+${checktime}" th:if="${pageIndex}>1">上一页</a>
                <a href="#" th:if="${pageIndex}==1">上一页</a>
               </li>
               <li><a th:href="'/?pageIndex=' + (${pageIndex}- 1)+'&hotelName='+${name}+'&hotelLevel='+${level}+'&distance='+${distance}+'&location='+${location}+'&checktime='+${checktime}" th:if="${pageIndex}>1" th:text="${pageIndex} - 1"></a></li>
               <li><a th:href="'/?pageIndex=' + ${pageIndex}+'&hotelName='+${name}+'&hotelLevel='+${level}+'&distance='+${distance}+'&location='+${location}+'&checktime='+${checktime}" th:text="${pageIndex}"></a></li>
               <li><a th:href="'/?pageIndex=' + (${pageIndex}+ 1)+'&hotelName='+${name}+'&hotelLevel='+${level}+'&distance='+${distance}+'&location='+${location}+'&checktime='+${checktime}" th:if="${size}==12" th:text="${pageIndex} + 1"></a></li>
               <li class="prev">
                   <a th:href="'/?pageIndex=' + (${pageIndex} + 1)+'&hotelName='+${name}+'&hotelLevel='+${level}+'&distance='+${distance}+'&location='+${location}+'&checktime='+${checktime}" th:if="${size}==12">下一页</a>
                   <a href="#" th:if="${size} < 12">下一页</a>
               </li>
           </ul>
       </div>


       <div class="footer">
         <div class="container"></div>
         <div class="footer_top">
           <h3>&nbsp;</h3>
           <h3>四川大学酒店订购系统</h3>
           <h3>Team 22</h3>
          </div>
       </div>

       <script src="laydate/laydate.js"></script>
       <script>
           laydate.render({
               elem:'#user-checkTimeRange',
               range:true
           })
       </script>
</body>
</html>		